import React from 'react';
import PropTypes from 'prop-types';
import { Card, Modal, Button } from 'antd';
import DescriptionList from '../../components/DescriptionList';
// import { getDicByKey } from '../../common/PateoForm/utils/helper';
import { getDicByKey } from '@/support/common';
import moment from 'moment';
import MaskText from '../MaskText';

const { Description } = DescriptionList;
class dealerDetailModal extends React.PureComponent {
  static contextTypes = {
    dicData: PropTypes.any,
  };
  render() {
    const status = ['', '考察', 'MOU', '保证金', '建设', '开业准备', '开业', '撤销'];
    const type = ['4S', '4SA', '城市展厅'];
    const { changeVisible, detailModelData } = this.props;
    return (
      <Modal
        title="详细信息"
        style={{ top: 20 }}
        width="40%"
        visible={this.props.visible}
        onCancel={() => changeVisible()}
        footer={[
          <Button key="back" type="primary" size="default" onClick={() => changeVisible()}>
            返回
          </Button>,
        ]}
      >
        <div>
          <Card bordered={false}>
            <DescriptionList col={2}>
              <Description term="名称" style={{ width: '100%' }}>
                {detailModelData.name}
              </Description>
              <Description term="简称">{detailModelData.shortName}</Description>
              <Description term="代码">{detailModelData.code}</Description>
              <Description term="品牌">
                {getDicByKey(this.context.dicData, 'optBrand', detailModelData.brandId)}
              </Description>
              <Description term="类型">{type[detailModelData.type]}</Description>
              <Description term="状态">
                {detailModelData.status ? status[detailModelData.status] : '正常'}
              </Description>
              <Description term="建立时间">
                {moment(detailModelData.openTime).format('YYYY-MM-DD')}
              </Description>
              <Description term="大区">
                {getDicByKey(
                  this.context.dicData,
                  `${detailModelData.brandId}area`,
                  detailModelData.areaId,
                )}
              </Description>
              <Description term="小区">
                {getDicByKey(
                  this.context.dicData,
                  `${detailModelData.brandId}village`,
                  detailModelData.smallAreaId,
                )}
              </Description>
              <Description term="省">
                {getDicByKey(
                  this.context.dicData,
                  `${detailModelData.brandId}province`,
                  detailModelData.provinceId,
                )}
              </Description>
              <Description term="市">
                {getDicByKey(
                  this.context.dicData,
                  `${detailModelData.brandId}city`,
                  detailModelData.cityId,
                )}
              </Description>
              <Description term="保险专员">
                <MaskText text={detailModelData.contactPerson} type="name" />
              </Description>
              <Description term="专员电话">
                <MaskText text={detailModelData.contactPersonPhone} type="phone" />
              </Description>
              <Description term="展车数量">{detailModelData.showCar}</Description>
              <Description term="传真">
                <MaskText text={detailModelData.fax} type={'fax'} />
              </Description>
              <Description term="邮箱">
                <MaskText text={detailModelData.email} type="email" />
              </Description>
              <Description term="地址" style={{ width: '100%' }}>
                <MaskText text={detailModelData.address} type="location" />
              </Description>
              <Description term="经度" style={{ width: '50%' }}>
                <MaskText text={detailModelData.lon} type="longitude" />
              </Description>
              <Description term="纬度" style={{ width: '50%' }}>
                <MaskText text={detailModelData.lat} type="latitude" />
              </Description>
              <Description term="经销商电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.phone} type={'phone'} />
              </Description>
              <Description term="业务员电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.salesCall} type={'phone'} />
              </Description>
              <Description term="销售经理姓名" style={{ width: '100%' }}>
                <MaskText text={detailModelData.salesManagerName} type="name" />
              </Description>
              <Description term="销售经理电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.salesManagerCall} type={'phone'} />
              </Description>
              <Description term="销售经理座机" style={{ width: '50%' }}>
                <MaskText text={detailModelData.salesManagerTel} type="landline" />
              </Description>
              <Description term="区域经理姓名" style={{ width: '100%' }}>
                <MaskText text={detailModelData.regionalManagerName} type="name" />
              </Description>
              <Description term="区域经理电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.regionalManagerCall} type="phone" />
              </Description>
              <Description term="区域经理座机" style={{ width: '50%' }}>
                <MaskText text={detailModelData.regionalManagerTel} type="landline" />
              </Description>
              <Description term="售后服务电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.customerServicePhone} type={'landline'} />
              </Description>
              <Description term="救援服务电话" style={{ width: '50%' }}>
                <MaskText text={detailModelData.rescueServicePhone} type={'phone'} />
              </Description>
              <Description term="保养电话" style={{ width: '100%' }}>
                <MaskText text={detailModelData.remindCall} type={'phone'} />
              </Description>
              <Description term="备注" style={{ width: '100%' }}>
                {detailModelData.remark}
              </Description>
            </DescriptionList>
          </Card>
        </div>
      </Modal>
    );
  }
}

export default dealerDetailModal;
